<template>
  <el-dialog title="历史" :visible="visible" width="60%" @close="close">
    <video
      class="video"
      muted
      autoplay
      controls
      :ref="`playerRef_history`"
    ></video>
    <span slot="footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="close">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import flvjs from "flv.js"; // 引入flvjs
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      const playerDom = this.$refs[`playerRef_history`];
      if (flvjs.isSupported() && playerDom) {
        let player = null;
        // 准备监控设备流地址
        const url =
          "rtsp://admin:sy12345678@192.168.17.253:554/Streaming/tracks/1701?starttime=20221025t060012z&endtime=20221025t070016z";
        // "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4";
        // 创建一个flvjs实例
        player = flvjs.createPlayer(
          {
            type: "flv",
            isLive: true,
            // url: "ws://192.168.17.101:8100/rtsp/?url=" + url
            url: "ws://192.168.17.202:8100/rtsp/?url=" + url
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true, //自动清除缓存
            stashInitialSize: 128
          }
        );

        player.on("error", e => {
          console.log("error", e);
        });
        // 将实例挂载到video元素上面
        player.attachMediaElement(playerDom);

        try {
          // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
          player.load();
          player.play();
          setTimeout(() => {
            console.log("player._transmuxer :>> ", player._transmuxer);
          }, 300);
          // let controller = player._transmuxer._controller;
          // let wsLoader = controller._ioctl._loader;
          // var oldWsOnCompleteFunc = wsLoader._onComplete;
          // wsLoader._onComplete = function() {
          //   if (!controller._remuxer) {
          //     controller._remuxer = {
          //       flushStashedSamples: function() {
          //         console.log("flushStashedSamples");
          //       }
          //     };
          //   }
          //   oldWsOnCompleteFunc();
          // };
        } catch (error) {
          console.log(error);
        }
        return player;
      }
    });
  },
  methods: {
    close() {
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style></style>
